<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<title>resume</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="css/resume.css">

	<script src="js/jquery-1.11.1.js"></script>


	
</head>
<body>
	
	<div class="container" id="container">
		<div class="row">
			<div class="resume-left col-xs-12 col-sm-12 col-md-4">
				<div class="resume-img">
					<span class="name-img">Nick&copy;</span>
					<img class="img-responsive" src="images/houhaibo.jpg" alt="">
				</div>
				<div class="left-content-list">
					<ul class="clearfix">
						<li class="active col-xs-3 col-sm-3 col-md-12">
							<a href="">
								<i class="icon-user"></i>
								about
							</a>
						</li>
						<li class=" col-xs-3 col-sm-3 col-md-12">
							<a href="">
								<i class="icon-camera"></i>
								portfolio
							</a>
						</li>
						<li class=" col-xs-3 col-sm-3 col-md-12">
							<a href="">
								<i class="icon-comments-alt"></i>
								blog
							</a>
						</li>
						<li class=" col-xs-3 col-sm-3 col-md-12">
							<a href="">
								<i class="icon-phone"></i>
								contact
							</a>
						</li>
					</ul>
				</div>
				<div class="share">
					<ul>
						<li>
							<a href="#"><i class="icon-facebook"></i></a>
							<a href="#"><i class="icon-twitter"></i></a>
							<a href="#"><i class="icon-linkedin"></i></a>
						</li>
						<li>
							<span>&copy;	2016	themes</span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 简历主体内容 -->
			<div class="resume-right col-xs-12 col-sm-12 col-md-8">
				<div class="about-title">
					<h2>Nick</h2>
				</div>
				<div class="info-box">
					<div class="info-title">
						<h1>haibo	hou</h1>
						<h3>web designer / Web developer</h3>
					</div>
					<!-- 描述 -->
					<div class="row info-describe">
						<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem.</p>
						</div>
						<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem. </p>
						</div>
					</div>
					<!-- 详细介绍 -->
					<div class="info-introduction">
						<!-- 联系方式 -->
						<div class="row contact">
							<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
								<ul>
									<li>
										<span class="inf">姓名</span>
										<span class="val">侯海波</span>
									</li>
									<li>
										<span class="inf">出生日期</span>
										<span class="val">1986.02.02</span>
									</li>
									<li>
										<span class="inf">联系地址</span>
										<span class="val">XX路XX号</span>
									</li>
								</ul>
							</div>
							<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
								<ul>
									<li>
										<span class="inf">邮箱</span>
										<span class="val">houhaibo86@sina.com</span>
									</li>
									<li>
										<span class="inf">电话</span>
										<span class="val">13564380260</span>
									</li>
									<li>
										<span class="inf">Skype</span>
										<span class="val">暂无</span>
									</li>
								</ul>
							</div>
						</div>
						<!-- 专业 -->
						<div class="professional">
							<div class="title-style">
								<h2>professional skills</h2>
							</div>
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
									
									<div class="info-content-1">
										<div class="design-ps">
											<p>Photoshop</p>
											<div class="border-1">
												<span class="bg-1"></span>
											</div>
										</div>
										<div class="design-ilt">
											<p>Illustrator</p>
											<div class="border-1">
												<span class="bg-1"></span>
											</div>
										</div>
										<div class="design-ids">
											<p>Indesign</p>
											<div class="border-1">
												<span class="bg-1"></span>
											</div>
										</div>
									</div>

									<div class="info-content-2">
										<div class="coding-h-c">
											<p>Html/css</p>
											<div class="border-2">
												<span class="bg-2"></span>
											</div>
										</div>
										<div class="coding-js">
											<p>JAVASCRIPT</p>
											<div class="border-2">
												<span class="bg-2"></span>
											</div>
										</div>
										<div class="coding-p-m">
											<p>php/mysql</p>
											<div class="border-2">
												<span class="bg-2"></span>
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>

						<!-- 经验 -->
						<div class="experience-box">
							<div class="title-style">
								<h2>experience</h2>
							</div>
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
									<div class="experience-content timeline">
										
										<div class="experience-pd">
											<div class="experience">
												<h4>WebDesigner – Mutation Media</h4>
												<h6><i class="icon-calendar"></i>	Feb 2015 - <span class="active">Current</span></h6>
												<div class="experience-info">
													<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
												</div>
											</div>

											<div class="experience">
												<h4>WebDesigner – Mutation Media</h4>
												<h6><i class="icon-calendar"></i>	Feb 2015 - <span>Current</span></h6>
												<div class="experience-info">
													<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
												</div>
											</div>

											<div class="experience">
												<h4>WebDesigner – Mutation Media</h4>
												<h6><i class="icon-calendar"></i>	Feb 2015 - <span>Current</span></h6>
												<div class="experience-info">
													<p>Ut enim ad minim veniam, quis nostrud exerc. Irure dolor in reprehend incididunt labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
												</div>
											</div>
										</div>

									</div>
								</div>
							</div>
						</div>

						<!-- services -->
						<div class="services-box">
							<div class="title-style">
								<h2>services</h2>
							</div>
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
									<ul>
										<li class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
											<div class="ico"><i class="icon-coffee"></i></div>
											<div class="det1"><h6>Great Support</h6></div>
											<div class="det2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p></div>
										</li>
										<li class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
											<div class="ico"><i class="icon-eye-open"></i></div>
											<div class="det1"><h6>Print & Branding</h6></div>
											<div class="det2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p></div>
										</li>
										<li class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
											<div class="ico"><i class="icon-move"></i></div>
											<div class="det1"><h6>Marketing</h6></div>
											<div class="det2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p></div>
										</li>
									</ul>
								</div>
							</div>
							<div class="line col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
								<div class="zigzag medium clearfix " data-svg-drawing="yes">
									<svg xml:space="preserve" viewBox="0 0 69.172 14.975" width="45" height="5" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
									<path d="M1.357,12.26 10.807,2.81 20.328,12.332
										29.781,2.879 39.223,12.321 48.754,2.79 58.286,12.321 67.815,2.793 " style="stroke-dasharray: 93.9851, 93.9851; stroke-dashoffset: 0;"></path>
									</svg>
								</div>
							</div>
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
									<ul>
										<li class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
											<div class="ico"><i class="icon-desktop"></i></div>
											<div class="det1"><h6>Web Design</h6></div>
											<div class="det2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p></div>
										</li>
										<li class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
											<div class="ico"><i class="icon-wrench"></i></div>
											<div class="det1"><h6>development</h6></div>
											<div class="det2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p></div>
										</li>
										<li class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
											<div class="ico"><i class="icon-lightbulb"></i></div>
											<div class="det1"><h6>Branding</h6></div>
											<div class="det2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p></div>
										</li>
									</ul>
								</div>
							</div>
						</div>

						<!-- 客户评价 -->
						<div class="testimonials-box">
							<div class="title-style">
								<h2>testimonials</h2>
							</div>
							<div class="row">
								<div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 clearfix">
									<div class="testimonials-div">
										
										<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
										  	<!-- Indicators -->
										  	<ol class="carousel-indicators">
										    	<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
										    	<li data-target="#carousel-example-generic" data-slide-to="1"></li>
										    	<li data-target="#carousel-example-generic" data-slide-to="2"></li>
										  	</ol>

										  	<!-- Wrapper for slides -->
										  	<div class="carousel-inner" role="listbox">
										    	<div class="item active">
										      		
										      		<div class="carousel-caption">
										        		<h3>houhaibo</h3>
										        	  	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
														 totam rem aperiam, eaque ipsa quae ab illo
														 inventore veritatis et quasi architecto beatae vitae dicta.</p>
										      		</div>
										    	</div>
										    	<div class="item">
										      		
										      		<div class="carousel-caption">
										        		<h3>houhaibo</h3>
										        	  	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
														 totam rem aperiam, eaque ipsa quae ab illo
														 inventore veritatis et quasi architecto beatae vitae dicta.</p>
										      		</div>
										    	</div>
										    	<div class="item">
										      		
										      		<div class="carousel-caption">
										        		<h3>houhaibo</h3>
										        	  	<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
														 totam rem aperiam, eaque ipsa quae ab illo
														 inventore veritatis et quasi architecto beatae vitae dicta.</p>
										      		</div>
										    	</div>
										    </div>

										  		<!-- Controls -->
												<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
												  	<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
										    		<span class="sr-only">Previous</span>
												</a>
												<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
												    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
												    <span class="sr-only">Next</span>
												</a>
										</div>

									</div>
								</div>
							</div>
						</div>
						
						<!-- 分割线 -->
						<div class="row button">
							<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
								<div class="divider">
									<div class="zigzag large clearfix " data-svg-drawing="yes">
										<svg xml:space="preserve" viewBox="0 0 69.172 14.975" width="37" height="28" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
											<path d="M1.357,12.26 10.807,2.81 20.328,12.332 29.781,2.879 39.223,12.321 48.754,2.79 58.286,12.321 67.815,2.793 " style="stroke-dasharray: 93.9851, 93.9851; stroke-dashoffset: 0;"></path>
										</svg>
									</div>
								</div>
							</div>
						</div>
						

						<div class="download">
							<div class="row">
								<div class="col-xs-12 col-sm-12 col-md-12">
									<a href="" class="a-download"><i class="icon-download"></i>Download my cv</a>
									<a href="" class="a-print"><i class="icon-flag"></i>Print my resume</a>
								</div>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 页面模板来源http://demo.mutationmedia.net/SPLIT/ -->



	
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript">
		$('.carousel').carousel({
			wrap:false
		});
	</script>
</body>
</html>